<!--原功能可根据步骤状态显示，可以点击下一步-->
<template>
  <div>
    <div class="arrowsBox">
      <div class="arrowsItem" v-for="(item, index) in list" :key="index">
<!--        <div-->
<!--          class="arrows-up arrows"-->
<!--          :class="{-->
<!--            arrows_active: item.status === 'active',-->
<!--            arrows_done: item.status === 'done',-->
<!--            arrows_todo: item.status === 'wait',-->
<!--          }"-->
<!--        ></div>-->
        <div class="arrows-up arrows arrows_active"></div>
        <div class="arrows-down arrows arrows_active"></div>
        <div :title="item.nodeName" class="arrows-label arrows_label_active pointer">
          {{ item.nodeName }}
        </div>
      </div>
    </div>

<!--    <button v-if="unFinish" @click="next" class="btn">下一步</button>-->
  </div>
</template>

<script>
	export default {
		name: "arrow-steps",

    props: ['list'],

    data() {
      return {

      };
    },
    methods: {
      // next() {
      //   for (let item of this.list) {
      //     if (item.status === "active") {
      //       item.status = "done";
      //     }
      //
      //     if (item.status === "wait") {
      //       item.status = "active";
      //       if (this.list[this.list.length - 1].status === "active") {
      //         this.unFinish = false;
      //       }
      //       break;
      //     }
      //   }
      // },
    },
  }
</script>

<style scoped>
  .arrowsBox {
    display: flex;
    justify-content: center;
    height: 25px;
    /*font-weight: bold;*/
    font-weight: normal;
  }
  .arrowsItem {
    position: relative;
    height: 100%;
    width: 75px;
    margin-right: 10px;
  }
  .arrows-up {
    transform: skewX(30deg);
  }
  .arrows-down {
    transform: skewX(-30deg);
  }
  .arrows {
    height: 50%;

    background: gray;
  }

  .arrows-label {
    position: absolute;
    font-size: 12px;
    top: 42%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }
  /*.arrows_done {*/
  /*  background: #edf9ff;*/
  /*}*/
  .arrows_active {
    background: #009fe9;
  }
  /*.arrows_wait {*/
  /*  background: #ebedf0;*/
  /*}*/

  /*.arrows_label_done {*/
  /*  color: #009fe9;*/
  /*}*/
  .arrows_label_active {
    color: #fff;
  }
  /*.arrows_label_wait {*/
  /*  color: #929393;*/
  /*}*/
  /*.btn {*/
  /*  background: #009fe9;*/
  /*  color: #fff;*/
  /*  border: none;*/
  /*  padding: 6px;*/
  /*  width: 100px;*/
  /*  border-radius: 4px;*/
  /*  margin: auto;*/
  /*  display: block;*/
  /*}*/
</style>
